<template>
  <ContentLayout>
    <SearchBox :title="'策略管理'" @handleQuery="handleQuery" @resetQuery="resetQuery">
      <template slot="form">
        <el-form class="search-form" ref="searchForm" :model="searchForm" label-width="auto" size="medium">
          <el-form-item label="策略编号">
            <el-input v-model="searchForm.code" placeholder="请输入策略编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="策略名称">
            <el-input v-model="searchForm.name" placeholder="请输入策略名称" clearable></el-input>
          </el-form-item>
        </el-form>
      </template>
    </SearchBox>

    <EvTable ref="stargyTable" :options="{data, columns}" :showPage="false" :rowDropElement="'.drag-btn'" :tablePage="page" @handlePageChange="handlePageChange">
      <template #drag_default>
        <span class="drag-btn">
          <i class="el-icon-s-operation"></i>
        </span>
      </template>
      <template #toolbar_buttons>
        <EvButton icon="el-icon-plus" power="customer_insert" type="primary" @click="handleAdd">添加</EvButton>
        <EvButton icon="el-icon-delete" power="customer_delete" type="danger" plain>删除</EvButton>
        <EvButton icon="el-icon-delete" power="test_customer_delete" type="info" plain>无权限</EvButton>
      </template>
      <template #operation_default="{ scope }">
        <el-button type="text" @click="edit(scope)">编辑</el-button>
        <el-button type="text" @click="edit(scope)">详情</el-button>
      </template>
      <template #property_default="{ scope }">
        <div style="display: flex;justify-content: center;">
          <div :class="['property-item', `property-${scope.row.property}`]">{{ getStrategyPropertyName(scope.row.property) }}</div>
        </div>

      </template>
      <template #status_default="{ scope }">
        {{ scope.row.status === 'used' ? "启用" : "禁用" }}
      </template>
    </EvTable>
    <!-- 编辑详情 -->
    <TablePageDetail ref="tablePageDetail" :drawerTitle="drawerTitle"></TablePageDetail>

  </ContentLayout>
</template>
<script>
import ContentLayout from "@/layout/contentLayout.vue";
import SearchBox from "@/components/EvTable/searchBox.vue";
import TablePageDetail from "@/views/TablePageDetail.vue";
export default {
  components: {
    ContentLayout,
    SearchBox,
    TablePageDetail
  },
  data() {
    return {
      /* 搜索项表单 */
      searchForm: {
        name: null,
        code: null
      },
      commonSearch: null,
      /* 策略属性数据 */
      strategyPropertyEnums: [
        { name: '正常', value: 'NORMAL', remark: '绿灯' },
        { name: '警告', value: 'WARNING', remark: '黄灯' },
        { name: '紧急', value: 'ERROR', remark: '红灯' },
        { name: '提示', value: 'INFO', remark: '蓝灯' },
        { name: '无效', value: 'NONE', remark: '灰灯' },
      ],
      selectRecords: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      columns: [
        { title: '', fixed: 'left',align: 'center', slots: { default: 'drag_default' }, width: 50},
        { type: 'checkbox', fixed: 'left', align: 'center', width: 50 },
        { title: '序号', align: 'center', width: 60, type: 'seq' },
        { title: '策略名称', field: 'name', align: 'left', width: 200 },
        { title: '策略编号', field: 'code', align: 'left', width: 200 },
        { title: '策略类别', field: 'type', align: 'center' },
        { title: '策略属性', field: 'property', align: 'center', slots: { default: 'property_default' }, minWidth: 80, width: 100 },
        { title: '状态', field: 'status', align: 'center', slots: { default: 'status_default' } },
        { title: '创建人', field: 'insertName', align: 'center' },
        { title: '创建时间', field: 'insertTime', align: 'center' },
        { title: '操作', field: 'table_operate', fixed: 'right', align: 'left', width:100, resizable: false, slots: { default: 'operation_default' } },
      ],
      data: [],
      /** 详情 */
      drawerTitle: '编辑策略'
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    handleAdd() {
      console.log(this.data);
    },
    edit(scope) {
      console.log(scope);
      this.$refs.tablePageDetail.open()
    },
    // 执行搜索
    handleQuery() {
      this.page.currentPage = 1;
      this.loadData();
    },
    resetQuery() {
      this.searchForm = {
        name: null,
        code: null
      }
      this.page.currentPage = 1;
      this.loadData();
    },
    // 获取策略属性名称
    getStrategyPropertyName(property) {
      return this.strategyPropertyEnums.find(item => item.value === property)?.name
    },
    // 加载数据
    loadData() {
      let params = [];
      Object.keys(this.searchForm).forEach((el) => {
        if (this.searchForm[el]) {
          params.push([el, "LIKE", `%${this.searchForm[el]}%`]);
        }
      });
      if (params.length > 0) {
        this.commonSearch = { AND: [...params] };
      } else {
        this.commonSearch = null;
      }
      let condition = null;
      if ( this.commonSearch && JSON.stringify(this.commonSearch) != "{}") {
        let common = JSON.parse(JSON.stringify(this.commonSearch));
        if (!condition) {
          condition = { AND: [] };
        }
        condition.AND = [...condition.AND, ...common.AND];
      }
      this.$server().query("function-andon-provider", "Strategy", condition, null, { current: this.page.currentPage, size: this.page.pageSize }, true)
        .then(response => {
          this.page.total = response.total;
          this.data = response.list
        })
        .catch(response => {
          this.$message.error(response.data.message);
        });
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage
      this.page.pageSize = pageSize
      this.loadData()
    },
  }
}
</script>
<style lang="scss" scoped>
.search-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 32%;
    margin-right: 1%;
    margin-bottom: 10px;
  }
}
.property-item {
  padding: 0 15px;
  line-height: 28px;
  color: #fff;
  border-radius: 14px;
  width: 70px;
}

.property-NORMAL {
  background-color: #53c77b;
}

.property-WARNING {
  background-color: #f3c126;
}

.property-ERROR {
  background-color: #ec5758;
}

.property-INFO {
  background-color: #439ef1;
}

.property-NONE {
  background-color: #a9bcc8;
}
.drag-btn {
  cursor: move;
  font-size: 16px;
}
</style>